<template>
  <GwContent>
    <GwTitle>组件：标题</GwTitle>
    <UiSection label="基础使用">
      <GwTitle>使用 slot </GwTitle>
      <GwTitle content="使用属性" />
    </UiSection>
    <UiSection label="自定义标签（需要打开控制台查看）">
      <GwTitle>DIV</GwTitle>
      <GwTitle tag="span">SPAN</GwTitle>
    </UiSection>
    <UiSection label="基础色彩：支持【深色】 模式">
      <GwTitle>Default</GwTitle>
      <GwTitle class="primary">Primary</GwTitle>
      <GwTitle class="accent">Accent</GwTitle>
      <GwTitle class="success">Success</GwTitle>
      <GwTitle class="danger">Danger</GwTitle>
      <GwTitle class="warning">Warning</GwTitle>
      <GwTitle class="info">Info</GwTitle>
    </UiSection>

    <UiSection label="扩展色彩：仅支持关键字和 hex 色彩，不支持【深色】 模式">
      <GwTitle color="pink">Pink</GwTitle>
      <GwTitle color="#00ff7f">#00ff7f</GwTitle>
    </UiSection>

    <UiSection label="带隔间">
      <GwTitle class="gap">Default</GwTitle>
      <GwTitle class="primary gap">Primary</GwTitle>
      <GwTitle class="accent">Accent</GwTitle>
    </UiSection>

    <UiSection label="嵌套">
      <GwTitle tag="span">Default <GwTitle class="danger" tag="span">Default</GwTitle> </GwTitle>
      <GwTitle tag="p">Default <GwTitle class="danger">Default</GwTitle> </GwTitle>
    </UiSection>
  </GwContent>
</template>

<script>
export default {
  name: 'DemoComponentTitle'
}
</script>

<style scoped>
.row {
  margin-bottom: 10px;
}
.w200 {
  width: 8em;
}
</style>
